<template>
  <Designer v-bind="params" v-model:current-step-key="params.currentStepKey" :stepChange="handleStepChange" ref="designerRef"> 
    <template #base>
      <BaseFormConfig class="diy-base-form-config bg-white"
        ref="formBaseInfoRef" @value-change="handleValueChange" 
        :data="{ 
          record: data.initBaseInfo,  dataSource: data.dataSource
        }"
      />
    </template>

    <template #formField>
      <FormFieldList class="diy-form-field"
        ref="formFieldListRef"
        @valueChange="handleFormFieldChange"
        :form-field="data.formFieldList"
      />
    </template>
  </Designer>
</template>
<script lang="ts" setup>
import { ref, nextTick, computed } from 'vue';
import Designer from '/@/views/diyDesigner/Designer.vue'
import { getDiyForm, saveOrUpdateDiyForm, listFormField } from '/@/api/sys/diyForm'
import BaseFormConfig from './Form.vue'
import FormFieldList from './FormFieldList.vue'
import {listAllDataSource} from '/@/views/onlineDev/datasource/api';
import { useRouter } from 'vue-router'
import { cloneDeep } from 'lodash'
const router = useRouter()
let id = router.currentRoute.value.query?.id as string

const data = ref<any>({
  initBaseInfo: {},
  baseInfo: {},
  dataSource: [],
  formFieldList: []
})
const formBaseInfoRef = ref()
const formFieldListRef = ref()
const designerRef = ref<any>()
const params = ref<any>({
  publishApi: undefined,
  queryApi: undefined,
  currentStepKey: null,
  isJumpNewPage: true,
  stepStyle: { width: '300px' },
  stepItems: [
    {
      title: '基础设置',
      key: 'base',
      stepClass: 'diy-base-form-container',
      status: 'wait',
    },
    {
      title: '表单字段',
      key: 'formField',
      stepClass: 'bg-white',
      status: 'wait',
    },
    {
      title: '表单设计',
      key: 'form',
      status: 'process',
    }
  ]
})

const handleQuery = async (id) => {
  console.log('id', id)
  data.value.dataSource = await listAllDataSource()
  data.value.initBaseInfo = await getDiyForm({ id })
  data.value.baseInfo = cloneDeep(data.value.initBaseInfo)

  designerRef.value.setTitle(data.value.baseInfo.name)
  data.value.formFieldList = await listFormField({ formId: id })
  const baseInfo = data.value.initBaseInfo
  return { deleted: !!baseInfo?.id, designerConfig: baseInfo?.formConfig }
}

const handlePublish = async (designerConfig) => {
  console.log('designerConfig', designerConfig)
  let baseFormValue = {}
  try {
    baseFormValue = await formBaseInfoRef.value.getData()
  } catch(e) {
    console.error(e)
    params.value.currentStepKey = 'base'
    return false
  }
  await saveOrUpdateDiyForm({ 
    ...baseFormValue, 
    submitType: '1', 
    fieldList: data.value.formFieldList,
    formConfig: JSON.stringify(designerConfig)
  }, !!id)
}

params.value.publishApi = handlePublish
params.value.queryApi = handleQuery

const handleFormFieldChange = (event) => data.value.formFieldList = event.$table.data

const handleStepChange = async (node) => {
  data.value.initBaseInfo = cloneDeep(data.value.baseInfo)
}

const handleValueChange = (values) => {
  console.log('values', values)
  // TODO 父子组件, 当父组件属性变化, 到子组件中watch监听到属性变动
  // params.value.title = values.name
  designerRef.value.setTitle(values.name)
  data.value.baseInfo = values
}
</script>

<style lang="less">
.diy-base-form-container  {
  width: 600px;
  margin-top: 5px;
  display: flex;
  align-self: center;
}

.diy-base-form-config {
  width: 560px;
  border-radius: 3%;
  height: calc(100vh - 200px);
}

.diy-form-field {
  margin-top: -5px;
}

</style>
